<template>
  <div>
    <Header />
    <div class="map_box">
      <baidu-map class="map" :center="{lng: lng, lat: lat}" :zoom="zoom">
        <Overlay
          v-for="(item,index) in List"
          :key="index"
          :position="{lng: item.lng, lat:  item.lat}"
          :text="item"
          v-on:OnMap="OnMap"
        ></Overlay>
      </baidu-map>
    </div>
  </div>
</template>
<script>
import Header from "@/components/pc_file/header.vue";
import Overlay from "@/components/pc_file/Overlay.vue";

export default {
  data() {
    return {
      position: {},
      index: "1",
      lng: 116.439685,
      lat: 39.92661,
      zoom: 10,
      List: []
    };
  },
  mounted() {
    this.OnStatisticsData();
  },
  methods: {
    OnStatisticsData() {
      this.instance
        .StatisticsData({})
        .then(res => {
          this.List = res.data.data;
        })
        .catch(function(error) {});
    },
    OnMap(val, idx) {
      console.log(val, idx);
      if (idx == 1) {
        this.ByCountyId(val);
      } else if (idx == 2) {
        this.BusinessAreaId(val);
      }
    },
    ByCountyId(val) {
      this.instance
        .ByCountyId({
          id: val
        })
        .then(res => {
          this.List = res.data.data;
          this.lng = this.List[0].lng;
          this.lat = this.List[0].lat;
          this.zoom = 13;
        })
        .catch(function(error) {});
    },
    BusinessAreaId(val) {
      // this.instance
      //   .BusinessAreaId({
      //     id: val
      //   })
      //   .then(res => {
      //     this.List = res.data.data;
      //     this.lng = this.List[0].lng;
      //     this.lat = this.List[0].lat;
      //     this.zoom = 13;
      //   })
      //   .catch(function(error) {});
    }
  },
  components: {
    Header,
    Overlay
  }
};
</script>
<style  scoped>
.map {
  height: 1000px;
}
.news {
  width: 106px;
  height: 106px;
  background: #e1673c;
  opacity: 0.92;
  border-radius: 50%;
}
.news_title {
  font-size: 16px;
  color: #ffffff;
}
.news_text {
  font-size: 14px;
  color: #ffffff;
}
.map_box {
  height: 1000px;
}
.box_item {
  width: 106px;
  height: 106px;
  background: #e1673c;
  opacity: 0.92;
  border-radius: 50%;
}
</style>